<template>
	<div class="handler-detailed">
		<div class="handler-detailed-warpper" v-if="detailedData.length">
			<div class="handler-detailed-menu">
				<Menu 
					class="menu-content" 
					:open-names="[0]"
					active-name="0-0" 
					@on-select="menuChange">
					<Submenu v-for="(item, index) in detailedData" :name="index">
	                    <template slot="title">{{item.keyName}}</template>
	                    <MenuItem v-for="(items, indexs) in item.val" :name="`${index}-${indexs}`">{{items.attributes.handlerName}}</MenuItem>
	               	</Submenu>
	            </Menu>
			</div>
			
			<div class="handler-detailed-content">
				<div class="handler-detailed-box">
					<header class="handler-detailed-header">
						<span>{{infoIng.handlerName}}</span>
						<span>详细信息</span>
					</header>
					<div class="handler-detailed-info">
						<div class="info-detail">
							<div class="title">
								<base-title title="handler名称"></base-title>								
							</div>
							<div class="content">
								{{infoIng.handlerName}}
							</div>
						</div>
						<div class="info-detail">
							<div class="title">
								<base-title title="handler路径"></base-title>								
							</div>
							<div class="content">
								{{infoIng.handlerPath}}
							</div>
						</div>
						<div class="info-detail">
							<div class="title">
								<base-title title="所在服务器"></base-title>								
							</div>
							<div class="content">
								{{infoIng.appServer}}
							</div>
						</div>
						<div class="info-detail">
							<div class="title">
								<base-title title="所属系统"></base-title>								
							</div>
							<div class="content">
								{{filterSystem(infoIng.appNamesList)}}
							</div>
						</div>
						<div class="info-detail">
							<div class="title">
								<base-title title="启动参数"></base-title>								
							</div>
							<div class="content">
								{{infoIng.runParams}}
							</div>
						</div>
						<div class="info-detail">
							<div class="title">
								<base-title title="配置文件"></base-title>								
							</div>
							<div class="content">
								{{infoIng.handlerConfig}}
							</div>
						</div>
						<div class="info-detail">
							<div class="title">
								<base-title title="备注"></base-title>								
							</div>
							<div class="content">
								{{infoIng.remark}}
							</div>
						</div>
						<div class="info-detail">
							<div class="title">
								<base-title title="方法"></base-title>								
							</div>
							<div class="content">
								<Table :columns="table.thead" :data="table.tbody" border></Table>
							</div>
						</div>
						<div class="info-detail">
							<div class="title">
								<base-title title="方法详情"></base-title>								
							</div>
							<div class="content">
								{{infoIng.remark}}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<loading v-show="showLoading"></loading>
	</div>
</template>

<script>
	import { loadingMixin, infoModalMixin, baseTitleMixin } from 'common/js/mixins';
	import { HandlerDetailedThead } from 'common/js/table';
	import { timeFilter } from 'common/js/util';
	import { errorNotice } from 'common/js/dom';
	import { getHandlerDetailed } from 'api/Main';
	
	export default {
		mixins: [loadingMixin, infoModalMixin, baseTitleMixin],
		computed: {
			infoIng() {
				return this.detailedData[this.activeIndex[0]].val[this.activeIndex[1]].attributes
			}
		},
		created() {
			this._getHandlerDetailed();
		},
		data() {
			return {
				table: {
					thead: HandlerDetailedThead(),
					tbody: []
				},
				activeIndex: [0, 0],
				detailedData: [],
				showLoading: false
			}
		},
		methods: {
			menuChange(name) {
				this.activeIndex = name.split('-');
			},
			filterSystem(arr) {
				if (arr && arr.length) {
					return arr.join('、');					
				}else {
					return '';
				}
			},
			filterData(data) {
				let arr = [];
				
				for (let key in data) {
					arr.push({
						keyName: key,
						val: data[key]
					})
				}
				
				return arr
			},
			_getHandlerDetailed() {
				this.showLoading = true;
				getHandlerDetailed()
					.then(res => {
						this.detailedData = this.filterData(res);
						this.showLoading = false;
					})
					.catch(res => {
						errorNotice(res.message);
						this.showLoading = false;
					})
					
			}
		}
	}
	
</script>

<style lang="scss">
	.handler-detailed {
		width: 100%;
		height: 100%;
		.handler-detailed-warpper {
			width: 100%;
			height: 100%;
			position: relative;
			.handler-detailed-menu {
				width: 255px;
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				overflow: auto;
				padding-right: 5px;
				.menu-content {
					width: 100% !important;
					min-height: 100%;
					&.ivu-menu-vertical .ivu-menu-submenu-title {
						padding: 8px 16px;
						font-size: 12px;
					}
					&.ivu-menu-vertical .ivu-menu-item {
						padding: 8px;
						padding-left: 25px;
						font-size: 12px;
					}
				}
			}
			.handler-detailed-content {
				position: absolute;
				left: 255px;
				right: 0;
				top: 0;
				bottom: 0;
				overflow: auto;
				padding: 0 10px;
				.handler-detailed-box {
					width: 100%;
					.handler-detailed-header {
						width: 100%;
						height: 30px;
						line-height: 30px;
						text-align: center;
						font-size: 16px;
					}
					.handler-detailed-info {
						width: 100%;
						.info-detail {
							width: 100%;
							margin: 10px 0;
							> .content {
								width: 100%;
								padding-left: 20px;
								font-size: 14px;
								word-wrap: break-word;
							}
						}
					}
				}
			}
		}
	}
</style>